<template>
	<div class="dashboard">
		<h1>人事薪酬系统可视化大屏</h1>

		<div class="salary-info">
			<div class="salary-box">
				<h2>本月已发工资</h2>
				<p>金额: {{ monthlySalary }} 万元</p>
			</div>
			<div class="salary-box">
				<h2>本季已发工资</h2>
				<p>金额: {{ quarterlySalary }} 万元</p>
			</div>
			<div class="salary-box">
				<h2>本年已发工资</h2>
				<p>金额: {{ annualSalary }} 万元</p>
			</div>
		</div>

		<div class="chart-container">
			<h2>各部门人员统计</h2>
			<div ref="departmentChart" style="width: 600px; height: 400px"></div>
		</div>

		<div class="chart-container">
			<h2>部门人力成本约</h2>
			<div ref="costChart" style="width: 600px; height: 400px"></div>
		</div>

		<div class="chart-container">
			<h2>年龄、司龄、工龄结构</h2>
			<div ref="ageChart" style="width: 600px; height: 400px"></div>
		</div>

		<div class="chart-container">
			<h2>能力结构统计</h2>
			<div ref="abilityChart" style="width: 400px; height: 300px"></div>
		</div>

		<div class="chart-container">
			<h2>性别统计</h2>
			<div ref="genderChart" style="width: 400px; height: 300px"></div>
		</div>

		<div class="employee-count">
			<h2>人员统计</h2>
			<div v-for="(item, index) in employeeCounts" :key="index">
				<p>在职人员: {{ item }} 个人</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import type { EChartsOption } from "echarts";

// 数据 (这里用示例数据，替换成你的实际数据)
const monthlySalary = ref(38.0);
const quarterlySalary = ref(138.0);
const annualSalary = ref(688.0);

const employeeCounts = ref([384, 384, 384, 384, 384, 384]);

const departmentChart = ref(null);
const costChart = ref(null);
const ageChart = ref(null);
const abilityChart = ref(null);
const genderChart = ref(null);

onMounted(() => {
	// 确保 DOM 已经挂载
	if (departmentChart.value) {
		renderDepartmentChart();
	}
	if (costChart.value) {
		renderCostChart();
	}
	if (ageChart.value) {
		renderAgeChart();
	}
	if (abilityChart.value) {
		renderAbilityChart();
	}
	if (genderChart.value) {
		renderGenderChart();
	}
});

// 各部门人员统计 图表配置
const renderDepartmentChart = () => {
	const chartDom = departmentChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		title: {
			text: "各部门人员统计",
		},
		tooltip: {},
		xAxis: {
			data: [
				"党群监察部",
				"科技教育中心",
				"表述艺术中心",
				"视觉艺术中心",
				"校区管理部",
				"实践教育中心",
				"财务部",
				"人力资源部",
				"教学管理部",
				"办公室",
			],
		},
		yAxis: {},
		series: [
			{
				name: "人数",
				type: "bar",
				data: [10, 15, 8, 12, 20, 18, 25, 30, 16, 22], // 示例数据，替换为你的数据
			},
		],
	};

	myChart.setOption(option);
};

// 部门人力成本 图表配置
const renderCostChart = () => {
	const chartDom = costChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		title: {
			text: "部门人力成本",
		},
		tooltip: {},
		xAxis: {
			data: [
				"党群监察部",
				"科技教育中心",
				"表述艺术中心",
				"视觉艺术中心",
				"校区管理部",
				"实践教育中心",
				"财务部",
				"人力资源部",
				"教学管理部",
				"办公室",
			],
		},
		yAxis: {},
		series: [
			{
				name: "成本",
				type: "bar",
				data: [35, 35, 35, 35, 35, 35, 35, 35, 35, 35], // 示例数据，替换为你的数据
			},
		],
	};

	myChart.setOption(option);
};

// 年龄、司龄、工龄结构 图表配置
const renderAgeChart = () => {
	const chartDom = ageChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		title: {
			text: "年龄、司龄、工龄结构",
		},
		tooltip: {},
		xAxis: {
			data: ["26岁以下", "26-30岁", "31-35岁", "35-40岁", "41-45岁", "46-50岁", "50岁以上"],
		},
		yAxis: {},
		series: [
			{
				name: "人数",
				type: "bar",
				data: [100, 120, 150, 200, 180, 100, 50], // 示例数据，替换为你的数据
			},
		],
	};

	myChart.setOption(option);
};

// 能力结构统计 图表配置 (饼图)
const renderAbilityChart = () => {
	const chartDom = abilityChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		title: {
			text: "能力结构统计",
		},
		tooltip: {
			trigger: "item",
		},
		series: [
			{
				name: "学历",
				type: "pie",
				radius: "70%",
				data: [
					{ value: 54.82, name: "本科" },
					{ value: 29.82, name: "本科以上" },
					{ value: 15.36, name: "本科以下" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	};

	myChart.setOption(option);
};

// 性别统计 图表配置 (饼图)
const renderGenderChart = () => {
	const chartDom = genderChart.value as HTMLElement;
	const myChart = echarts.init(chartDom);

	const option: EChartsOption = {
		title: {
			text: "性别统计",
		},
		tooltip: {
			trigger: "item",
		},
		series: [
			{
				name: "性别",
				type: "pie",
				radius: "70%",
				data: [
					{ value: 67, name: "女性职员" },
					{ value: 33, name: "男性职员" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	};

	myChart.setOption(option);
};
</script>

<style scoped>
.dashboard {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}

.salary-info {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
}

.salary-box {
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
}

.chart-container {
	margin-bottom: 20px;
}

.employee-count {
	margin-top: 20px;
}
</style>
